@import "./../common/common";

main>.bookBasic{    
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0;
  .bookMainImg{
    height: 28.5rem;
    text-align: center;
    position: relative;
    >img{
      width: auto;
      height: 100%;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }
    >.acteBanner{
      background-color: rgba(255, 142, 50, 0.8);
      color: white;
      padding: 0.5rem 0.75rem;
      font-size: 1.25rem;
      position: absolute;
      bottom: 1rem;
    }
  }
  .bookBasicRight{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name{
      font-size: 1.5rem;
      font-weight: bolder;
      letter-spacing: 0.25rem;
    }
    .author{
      line-height: 2rem;
    }
    .price{
      font-size: 1.25rem;
      font-weight: 600;
    }
    .detail{
      letter-spacing: 3px;
    }
    .actions{
      &.fixxx{
        position: fixed;
        bottom: 0;
        z-index: 999;
        background-color: white;
        width: 100%;
        left: 0;
        justify-content: space-between;
        flex-direction: row-reverse;
        display: flex;
        padding: 1rem;
      box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 -1px 2px rgba(0, 0, 0, 0.24);        
        >.share{
          display:none;
        }
      }
      .chooseNum{
        border: 1px solid @themeR;
        .num{
          opacity: 1;
        }
      }
      .bdsharebuttonbox {
        display: flex;
        justify-content: space-between;
        >span {
          display: flex;
          >a {
            background: none;
            margin: 0;
            padding: 0;
            text-align: center;
            display: inline-block;
            &:before {
              color: white;
              padding: 0.25rem;
              margin-right: 0.25rem;
            }
          }
          &:nth-child(1)>a::before {
            background-color: #2ba3ef;
          }
          &:nth-child(2)>a::before {
            background-color: #e25550;
          }
          &:nth-child(3)>a::before {
            background-color: #42bd41;
          }
          &:nth-child(4)>a::before {
            background-color: #24292e;
          }
        }
      }
    }
  }
}